<div class="license-management-dialog modal">
    <div class="modal-header">
        <h1 class="dialog-title">{{Strings.MANAGE_LICENSE_DIALOG_TITLE}}</h1>
    </div>

    <div class="modal-body" style="max-height: 500px; padding: 24px;">
        <!-- License Activation Section -->
        <div class="license-activation-section">
            <div class="license-form-group">
                <label for="license-key-input" class="license-form-label">
                    {{Strings.LICENSE_KEY}}
                </label>
                <input
                    type="text"
                    id="license-key-input"
                    class="license-form-input"
                    placeholder="{{Strings.LICENSE_KEY_PLACEHOLDER}}"
                />
            </div>
            <button
                id="activate-license-btn"
                class="btn primary license-activate-btn">
                <span class="btn-text"><i class="fa fa-key" style="margin-right: 8px;"></i>{{Strings.LICENSE_KEY_ACTIVATE}}</span>
                <span class="btn-spinner">
                    <i class="fa fa-spinner fa-spin" style="margin-right: 8px;"></i>{{Strings.LICENSE_KEY_ACTIVATING}}
                </span>
            </button>

            <!-- Reapply License Secondary Action -->
            <div id="reapply-license-container" class="license-reapply-container" style="display: none; margin-top: 12px; text-align: center;">
                <a id="reapply-license-link" href="#" style="font-size: 13px; text-decoration: none;">
                    <i class="fa fa-sync" style="margin-right: 6px;"></i>{{Strings.LICENSE_REAPPLY_TO_DEVICE}}
                </a>
            </div>
        </div>

        <!-- Divider -->
        <hr class="license-divider">

        <!-- License Status Section -->
        <div class="license-status-section">
            <h3 class="license-section-title">
                {{Strings.LICENSE_KEY_CURRENT}}
            </h3>

            <!-- Loading State -->
            <div id="license-status-loading" class="license-status-loading">
                <i class="fa fa-spinner fa-spin"></i>
                <span>{{Strings.LICENSE_KEY_CHECKING}}</span>
            </div>

            <!-- No License State -->
            <div id="license-status-none" class="license-status-none" style="display: none;">
                <i class="fa fa-exclamation-circle"></i>
                <span>{{Strings.LICENSE_KEY_NONE}}</span>
            </div>

            <!-- Valid License State -->
            <div id="license-status-valid" class="license-status-valid" style="display: none;">
                <div class="license-info-card">
                    <div class="license-info-row" style="margin-bottom: 12px;">
                        <span class="license-info-label">{{Strings.LICENSE_INFO_STATUS_LABEL}}</span>
                        <span class="license-status-badge">{{Strings.LICENSE_STATUS_ACTIVE}}</span>
                    </div>
                    <div class="license-info-row">
                        <span class="license-info-label">{{Strings.LICENSE_INFO_LICENSED_TO_LABEL}}</span>
                        <span id="licensed-to-name" class="license-info-value"></span>
                    </div>
                    <div class="license-info-row">
                        <span class="license-info-label">{{Strings.LICENSE_INFO_TYPE_LABEL}}</span>
                        <span id="license-type-name" class="license-info-value"></span>
                    </div>
                    <div class="license-info-row">
                        <span class="license-info-label">{{Strings.LICENSE_INFO_VALID_UNTIL_LABEL}}</span>
                        <span id="license-valid-till" class="license-info-value"></span>
                    </div>
                </div>
            </div>

            <!-- Error State -->
            <div id="license-status-error" class="license-status-error" style="display: none;">
                <i class="fa fa-exclamation-triangle"></i>
                <span id="license-error-message">{{Strings.LICENSE_CHECK_ERROR}}</span>
            </div>
        </div>

        <!-- Success/Error Messages for Activation -->
        <div id="activation-message" class="license-activation-message">
            <span id="activation-message-text"></span>
        </div>
    </div>

    <div class="modal-footer">
        <button class="dialog-button btn" data-button-id="close">{{Strings.CLOSE}}</button>
    </div>
</div>
